.wrapper {
  position: relative;
  border-bottom: 1px solid var(--mb-color-border);
  display: flex;
  flex-direction: column;

  &.formatting {
    background-color: var(--mb-color-bg-medium);
  }
}

.error {
  color: var(--mb-color-error);
  margin: 0.5rem 0;
  white-space: pre-wrap;
}

.toolbar {
  position: absolute;
  top: 0;
  right: 0;
}

.toolbarButton {
  aspect-ratio: 1;
}

.editor {
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
  color: var(--mb-color-text-dark);
  margin-right: calc(28px + var(--mantine-spacing-sm));

  :global {
    .cm-gutters {
      border-top-left-radius: var(--mantine-radius-sm);
    }
  }
}

.tooltips {
  :global {
    .cm-tooltip {
      border: none !important;
      background: none !important;
    }

    .cm-tooltip-autocomplete {
      display: none;
    }
  }
}

.shortcuts {
  position: absolute;
  bottom: var(--mantine-spacing-sm);
  left: calc(1.6rem + var(--mantine-spacing-sm));
  right: 0;
  transition: opacity 300ms;
}
